<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="两小数据大屏" name="liangxiao">
        <div class="edit-screen">
          <div class="es-left">
            <p>产连通数据</p>
            <div>
              <span>累计注册商户数：</span>
              <el-input v-model="editForm.shopNum" style="width: 140px"></el-input>
            </div>
            <p><el-checkbox v-model="editForm.flag">使用编辑数据</el-checkbox></p>
          </div>
          <div class="es-middle">
            <p>各省数据内容</p>
            <el-input
              style="margin: 10px; width: 80%"
              type="textarea"
              :rows="22"
              placeholder="请输入内容"
              v-model="editForm.provinceData"
            ></el-input>
          </div>
          <div class="es-left">
            <p>域外商贸通数据</p>

            <div>
              <span>&#12288;&#12288;&#12288;&#12288;总商户数：</span>
              <el-input v-model="editForm.sumShopNum" style="width: 140px"></el-input>
            </div>
            <div>
              <span>累计小超市店铺数：</span>
              <el-input v-model="editForm.littleShopNum" style="width: 140px"></el-input>
            </div>
            <div>
              <span>累计小宾馆店铺数：</span>
              <el-input v-model="editForm.hotelNum" style="width: 140px"></el-input>
            </div>
            <div>
              <span>昨日新增商户数量：</span>
              <el-input v-model="editForm.addShopNum" style="width: 140px"></el-input>
            </div>
          </div>
          <div class="es-bottom">
            <el-button type="primary" @click="save">保存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="域内信息数据大屏" name="zhengxin">
        <div class="edit-screen">
          <el-form ref="form" :model="creditForm" label-width="80px">
            <div class="es-middle">
              <p>金融机构客户统计</p>
              <el-input
                style="margin: 10px; width: 80%"
                type="textarea"
                :rows="55"
                placeholder="请输入内容"
                v-model="creditForm.statisticalData"
              ></el-input>
            </div>
            <div class="es-left">
              <div class="el-items" v-for="(item, index) in typeList" :key="index">
                <p class="top-title">{{ item.name }}</p>
                <el-form-item label="企业">
                  <el-input v-model="creditForm[item.value].company"></el-input>
                </el-form-item>
                <el-form-item label="个人">
                  <el-input v-model="creditForm[item.value].personal"></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="es-bottom">
              <el-button type="primary" @click="creditSave">保存</el-button>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'editScreen',
  data() {
    return {
      creditForm: {
        //金融机构客户统计
        jrjgkhtj: {
          personal: '',
          company: '',
        },
        zxbgtj: {
          personal: '',
          company: '',
        },
        rzkhtj: {
          personal: '',
          company: '',
        },
        ljrzjetj: {
          personal: '',
          company: '',
        },
        yhkhtj: {
          personal: '',
          company: '',
        },
        yhzxbgtj: {
          personal: '',
          company: '',
        },
        fyhjgkhtj: {
          personal: '',
          company: '',
        },
        fyhjgzxbgtj: {
          personal: '',
          company: '',
        },
        statisticalData: '',
      },
      typeList: [
        {
          name: '金融机构客户统计',
          value: 'jrjgkhtj',
        },
        {
          name: '信息报告统计',
          value: 'zxbgtj',
        },
        {
          name: '融资客户统计',
          value: 'rzkhtj',
        },
        {
          name: '累计融资金额统计',
          value: 'ljrzjetj',
        },
        {
          name: '银行客户统计',
          value: 'yhkhtj',
        },
        {
          name: '银行信息报告统计',
          value: 'yhzxbgtj',
        },
        {
          name: '非银机构客户统计',
          value: 'fyhjgkhtj',
        },
        {
          name: '非银机构信息报告统计',
          value: 'fyhjgzxbgtj',
        },
      ],
      activeName: 'liangxiao',
      editForm: {
        shopNum: '',
        sumShopNum: '',
        addShopNum: '',
        hotelNum: '',
        littleShopNum: '',
        provinceData: '',
        flag: true,
      },
    }
  },
  mounted() {
    this.initPage()
  },
  methods: {
    tabClick() {},
    async creditSave() {
      let params = {
        bankComNum: this.creditForm['yhkhtj'].company,
        bankCreditComNum: this.creditForm['yhzxbgtj'].company,
        bankCreditPerNum: this.creditForm['yhzxbgtj'].personal,
        bankPerNum: this.creditForm['yhkhtj'].personal,
        comCreditNum: this.creditForm['zxbgtj'].company,
        companyNum: this.creditForm['jrjgkhtj'].company,
        financingComAmount: this.creditForm['ljrzjetj'].company,
        financingComNum: this.creditForm['rzkhtj'].company,
        financingPerAmount: this.creditForm['ljrzjetj'].personal,
        financingPerNum: this.creditForm['rzkhtj'].personal,
        notBankComNum: this.creditForm['fyhjgkhtj'].company,
        notBankCreditComNum: this.creditForm['fyhjgzxbgtj'].company,
        notBankCreditPerNum: this.creditForm['fyhjgzxbgtj'].personal,
        notBankPerNum: this.creditForm['fyhjgkhtj'].personal,
        perCreditNum: this.creditForm['zxbgtj'].personal,
        personNum: this.creditForm['jrjgkhtj'].personal,
        statisticalData: this.creditForm['statisticalData'],
      }

      const res = await this.$http.post('/khy/showData/addCreditData', params)
      this.$message.success('域内信息大屏数据保存成功，请刷新大屏！')
      console.log(res)
    },
    async initPage() {
      let _ = this
      const res = await this.$http.post('/khy/showData/getData', {}, { isLoading: false })
      for (let key in this.editForm) {
        _.editForm[key] = res[key]
      }

      const creditRes = await this.$http.post('/khy/showData/getCreditData', {}, { isLoading: false })
      this.creditDataFill(creditRes)
    },
    creditDataFill(res) {
      this.creditForm['yhkhtj'].company = res['bankComNum']
      this.creditForm['yhzxbgtj'].company = res['bankCreditComNum']
      this.creditForm['yhzxbgtj'].personal = res['bankCreditPerNum']
      this.creditForm['yhkhtj'].personal = res['bankPerNum']
      this.creditForm['zxbgtj'].company = res['comCreditNum']
      this.creditForm['jrjgkhtj'].company = res['companyNum']
      this.creditForm['ljrzjetj'].company = res['financingComAmount']
      this.creditForm['rzkhtj'].company = res['financingComNum']
      this.creditForm['ljrzjetj'].personal = res['financingPerAmount']
      this.creditForm['rzkhtj'].personal = res['financingPerNum']
      this.creditForm['fyhjgkhtj'].company = res['notBankComNum']
      this.creditForm['fyhjgzxbgtj'].company = res['notBankCreditComNum']
      this.creditForm['fyhjgzxbgtj'].personal = res['notBankCreditPerNum']
      this.creditForm['fyhjgkhtj'].personal = res['notBankPerNum']
      this.creditForm['zxbgtj'].personal = res['perCreditNum']
      this.creditForm['jrjgkhtj'].personal = res['personNum']
      this.creditForm['statisticalData'] = res['statisticalData']
    },
    async save() {
      let params = this.editForm
      const res = await this.$http.post('/khy/showData/addData', params)
      this.$message.success('两小大屏数据保存成功，请刷新大屏！')
      console.log(res)
    },
  },
}
</script>

<style lang="scss" scoped>
.edit-screen {
  width: 100%;
  height: 100%;
  background: #ebebec;
  .es-left {
    /*border: 1px solid #d4d5d6;*/
    margin: 10px;
    width: 22%;
    float: left;
    .el-items {
      border: 1px solid #cdcbcb;
      margin-bottom: 6px;
      .top-title {
        font-weight: bold;
      }
    }
  }
  .es-middle {
    border-left: 1px solid #d4d5d6;
    border-right: 1px solid #d4d5d6;
    width: 50%;
    text-align: center;
    float: left;
  }
  .es-bottom {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 10px;
  }
}
</style>
